body {
    background: silver;
}

#header {
    padding: 20px;
    background: #99ccff;
}

#content {
    background: #fff;
    padding: 20px;
    height: 200px;

}

#footer {
    background: #ffffcc;
    padding: 20px;
}
#msuit{
    color: #FF0000;
    float: left;
    text-decoration: none;
    width: 55px;
    transform: rotate(90deg);
    -ms-transform: rotate(90deg); /* IE 9 */
    -webkit-transform: rotate(90deg); /* Safari and Chrome */
    -o-transform: rotate(90deg); /* Opera */
    -moz-transform: rotate(90deg); /* Firefox */
}
#gray{
    background-color: buttonshadow;
    float: left;
    text-decoration: none;
    width: 55px;
    height: 40px;
    margin-top: 30px;
    position: absolute;

}

#mys{
    position: inherit;
    margin-left: 8px;

}
#ucard{
    float: left;
    height: auto;
    margin-top:  60px;
    width: 360px;
    margin-left: 55px;

}
#acceptbut,#attakf{
    display: none
}
.red, .black,.pcards{
    border: 1px none;
    float: left;
    height: 55px;
    width: 40px;
    border:solid 1px  brown;
    text-align: center;
    vertical-align: middle;
    margin-left: 1px;
}
.red, .red  a:link, red a:visited, red a:active, .red  .attak,.red .back{
    color: red;
    text-decoration:none; 
}
#ucard .black, #ucard .red {
    background-color:bisque;
    margin-left: -8px;
}
.pcards{ 
    background-color:buttonshadow;
    height: 55px;
    width: 40px;
    border:solid 1px  brown;
    margin-left: -10px
}
#pccard{
    left: 60px;
    margin-left: 80px;
    margin-top: -55px;
    position: fixed;

}
.black,.black a:link, .black  .attak, .black .back{
    color: black;
    text-decoration:none; 
}
#gfield,#gfield2{
    background-color: lemonchiffon ; 

    float: left;
    position: inherit
}
#gfield2{
    background-color:bisque;
    margin-top: 0px;
}
#gfield1{
    float: left;
    width: 280px;
}
#batt{
    float: left;
    overflow: auto;
    width: 300px;
}
#buttons{
    left: 550px;
    margin-top: 90px;
    position: fixed;
    width: 80px;
}